<template>
  <customContainer ref="mainConfig" :config="config" />
  <div>
    <!-- 详情页 -->
    <orderDetail ref="setFormRef" />
    <feeName ref="feeRef"></feeName>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, getCurrentInstance, defineAsyncComponent } from 'vue'
import { Download } from '@element-plus/icons-vue'
import { ElButton } from 'element-plus'
import { DictDirection } from '@/store/modules/dicts'
import { listTable } from '@/api/expressManager/salesOrder'
import userStore from '@/store/modules/user'

const orderDetail = defineAsyncComponent(() => import('./components/orderDetail.vue'))
const feeName = defineAsyncComponent(() => import('./components/feeName.vue'))
const user = userStore()
const deptIds = user.user.deptId
const setFormRef = ref(undefined)
const feeRef = ref(undefined)
const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
  deptId: deptIds,
  orderNo: '',
  waybillNo: '',
  mainTransferOrderNo: '',
  customerCode: '',
  receivingSite: '',
  areaCode: '',
  transportType: 1,
  marketProducts: '',
  goodsType: '',
  consigneeCountry: '', 
  consigneePostcode: '',
  daterange: '',
  splittingStatus: '',
  maker: '',
  businessManager: '',
  zDdateRange: '',
  tagNumber: '',
  isFasteners: 1,
  approvalFlag: '',  
})
const mainConfig = ref(undefined),
  {
    appContext: {
      config: {
        globalProperties: { $download },
      },
    },
  } = getCurrentInstance()
const handleExport = () => {
  const od = orderNoss.value
  
  if (od.length == 0) {
    const data = queryParams.value
    return $download('order/order/info/salesExport', data, `订单列表(销售)_${ new Date().getTime() }.xlsx`)
  } 
  const data = {
    orderNo: orderNoss.value.toString(),
  }
  return $download('order/order/info/salesExport', data, `订单列表(销售)_${ new Date().getTime() }.xlsx`)
}
const tofee = (row: { [key: string]: any }) => {
  feeRef.value.feeOpen = true
  feeRef.value.title = '应收费管理'
  feeRef.value.orderNoss = row.orderNo
  feeRef.value.getList(row.orderNo)
}
const toMianinfo = (row: { [key: string]: any }) => {
  setFormRef.value.openDetail = true
  setFormRef.value.title = '订单详情'
  setFormRef.value.idss = row.id
  setFormRef.value.disableds = true
  setFormRef.value.orderNOs = row.orderNo
  setFormRef.value.xg = '2'
  setFormRef.value.initData(row.id)
}
const orderNoss = ref([])
const handleTableSelect = (rows: { [key: string]: any }[]) => {
  orderNoss.value = rows.map((item) => item.orderNo)
}
const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '系统订单号',
            prop: 'orderNo',
            option: {
              placeholder: '请输入系统订单号',
              type: 'textarea',
            },
          },
          {
            label: '客户单号',
            prop: 'waybillNo',
            option: {
              placeholder: '请输入客户单号',
              type: 'textarea',
            },
          },
          {
            label: '主转单号',
            prop: 'mainTransferOrderNo',
            option: {
              placeholder: '请输入主转单号',
              type: 'textarea',
            },
          },
          {
            type: 'select',
            label: '客户名称',
            prop: 'customerCode',
            option: {
              dictInfo: { dict: DictDirection.客户 },
            },
          },
          {
            type: 'select',
            label: '拣货站点',
            prop: 'receivingSite',
            option: {
              dictInfo: { dict: DictDirection.收货站点 },
            },
          },
          {
            type: 'select',
            label: '所属站点',
            prop: 'areaCode',
            option: {
              dictInfo: { dict: DictDirection.收货站点 },
            },
          },
          {
            type: 'select',
            label: '运输类型',
            prop: 'transportType',
            option: {
              dictInfo: { dict: DictDirection.运输类型 },
            },
          },
          {
            type: 'select',
            label: '销售产品',
            prop: 'marketProducts',
            option: {
              dictInfo: { dict: DictDirection.产品 },
            },
          },
          {
            type: 'select',
            label: '收货类型',
            prop: 'goodsType',
            option: {
              dictInfo: { dict: DictDirection.货物类型 },
            },
          },
          {
            type: 'selectv2',
            label: '目的国家',
            prop: 'consigneeCountry',
            option: {
              dictInfo: { dict: DictDirection.国家 },
            },
          },
          {
            label: '邮编',
            prop: 'consigneePostcode',
            option: {
              controls: false,
            },
          },
          {
            type: 'datePicker',
            label: '创建日期',
            prop: 'daterange',

            option: {
              type: 'daterange',
              valueFormat: 'YYYY-MM-DD',
            },
          },
          {
            type: 'select',
            label: '订单状态',
            prop: 'splittingStatus',
            option: {
              dictInfo: { dict: DictDirection.包裹状态 },
            },
          },
          {
            type: 'select',
            label: '制单人',
            prop: 'maker',
            option: {
              dictInfo: { dict: DictDirection.业务员 },
            },
          },
          {
            type: 'select',
            label: '业务员',
            prop: 'businessManager',
            option: {
              dictInfo: { dict: DictDirection.业务员 },
            },
          },
          {
            type: 'date-picker',
            label: '制单日期',
            prop: 'zDdateRange',
            option: {
              type: 'daterange',
              valueFormat: 'YYYY-MM-DD',
            },
          },
          {
            label: '标签号',
            prop: 'tagNumber',
          },
          {
            type: 'select',
            label: '扣件状态',
            prop: 'isFasteners',
            option: {
              dictInfo: { dict: DictDirection.扣件状态 },
            },
          },
          {
            type: 'select',
            label: '价格审批状态',
            prop: 'approvalFlag',
            option: {
              dictInfo: { dict: DictDirection.扣件状态 },
            },
          },
      
        ],
        queryParams: queryParams.value,
        formOption: {},
      },
      btns: [
        {
          title: '导出订单列表',
          type: 'warning',
          icon: Download,
          onClick: handleExport,
        },
      ],
      table: {
        columns: [
          { type: 'selection', width: '55', align: 'center' },
          { label: '客户单号', width: '150', align: 'center', prop: 'waybillNo' },
          { label: '主转单号', align: 'center', width: '150', prop: 'mainTransferOrderNo' },
          { label: '客户名称',
            align: 'center',
            width: '100',
            prop: 'customerName',
          },
          { label: '销售产品',
            align: 'center',
            prop: 'marketProducts',
            autoFormatter: {
              dict: DictDirection.产品,
              rowKey: 'marketProducts',
            } },
          { label: '总实重', align: 'center', prop: 'receivingTotalWeight' },
          { label: '材积重', align: 'center', prop: 'receivingTotalWood' },
          { label: '收货体积重', align: 'center', width: '100', prop: 'volumeWeightTotal' },
          { label: '计费重', align: 'center', prop: 'receivingTotalCharging' },
          { label: '件数', align: 'center', prop: 'receivingTotal' },
          { label: '订单状态',
            align: 'center',
            prop: 'splittingStatus',
            autoFormatter: {
              dict: DictDirection.包裹状态,
              rowKey: 'splittingStatus',
            } },
          { label: '所属站点',
            align: 'center',
            width: '100',
            prop: 'areaCode',
            autoFormatter: {
              dict: DictDirection.收货站点,
              rowKey: 'areaCode',
            } },
          { label: '拣货站点',
            align: 'center',
            prop: 'receivingSite',
            autoFormatter: {
              dict: DictDirection.收货站点,
              rowKey: 'receivingSite',
            } },
          { label: '创建日期', align: 'center', prop: 'orderTime', width: '100' },
          { label: '邮编', align: 'center', prop: 'consigneePostcode' },
          { label: '国家',
            align: 'center',
            width: '100',
            prop: 'consigneeCountry',
            autoFormatter: {
              dict: DictDirection.国家,
              rowKey: 'consigneeCountry',
            } },
          { label: '打印标签次数', align: 'center', prop: 'printTagCount' },
          { label: '标签号', align: 'center', prop: 'tagNumber' },
          { label: '货物类型',
            align: 'center',
            prop: 'goodsType',
            autoFormatter: {
              dict: DictDirection.货物类型,
              rowKey: 'goodsType',
            } },
          { label: '业务员', align: 'center', width: '100', prop: 'businessManager' },
          { label: '制单人', align: 'center', prop: 'maker' },
          { label: '制单日期', align: 'center', prop: 'makerDate' },
          { label: '报关件', align: 'center', prop: 'customsDeclaration' },
          { label: '备注', align: 'center', width: '100', prop: 'remarks' },
          { label: '系统订单号', align: 'center', width: '100', prop: 'orderNo' },
          {
            label: '操作',
            width: '182px',
            fixed: 'right',
           
            showOverflowTooltip: false,
            className: 'custormFixedCol',
            align: 'center',
            render(h, params) {
              const buttons = [
               
                {
                  title: '应收费',
                  clickFun: tofee,
                  disabled: params.row.splittingStatus == 0,
                },
                {
                  title: '详情',
                  clickFun: toMianinfo,
                }]
              return buttons.map((el) => h(
                ElButton,
                {
                  text: true,
                  type: 'primary',
                  onClick: () => {
                    el.clickFun(params.row)
                  },
                },
                {
                  default: () => el.title,
                },
              ))
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            handleTableSelect(rows)
          },
        },
      },
      api: listTable,
      customKey: 'express/mainBusiness/salesOrderList',
    }
  },
  set(val) {
    return val
  },
  // customKey: 'express-orderInfo',
})
</script>